<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">

      <div v-if="crud.props.searchToggle">
        <!-- 搜索 -->
        <label class="el-form-item-label">订单号</label>
        <el-input
          v-model.trim="query.orderNo"
          clearable
          placeholder="订单号"
          style="width: 185px;"
          class="filter-item"
          @keyup.enter.native="crud.toQuery"
        />
        <label class="el-form-item-label"> 发货状态</label>
        <!--        <el-input v-model="query.isWithdraw" clearable placeholder=" 是否已提现" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery" />-->
        <el-select
          v-model="query.sendStatus"
          clearable
          size="small"
          placeholder="发货状态"
          class="filter-item"
          style="width: 180px"
          @change="crud.toQuery"
        >
          <el-option
            v-for="item in sendStatus"
            :key="item.key"
            :label="item.display_name"
            :value="item.key"
          />
        </el-select>
        <label class="el-form-item-label">签收状态</label>
        <!--        <el-input v-model="query.isReview" clearable placeholder="审核状态" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery" />-->
        <el-select
          v-model="query.isSign"
          clearable
          size="small"
          placeholder="签收状态"
          class="filter-item"
          style="width: 185px"
          @change="crud.toQuery"
        >
          <el-option
            v-for="item in isSign"
            :key="item.id"
            :label="item.display_name"
            :value="item.key"
          />
        </el-select>
        <label class="el-form-item-label">收货人姓名</label>
        <el-input
          v-model.trim="query.receiveName"
          clearable
          placeholder="收货人姓名"
          style="width: 185px;"
          class="filter-item"
          @keyup.enter.native="crud.toQuery"
        />
        <rrOperation :crud="crud" />
      </div>

      <!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
      <crudOperation :permission="permission" />
      <!--表单组件-->
      <el-dialog
        :close-on-click-modal="false"
        :before-close="crud.cancelCU"
        :visible.sync="crud.status.cu > 0"
        :title="crud.status.title"
        width="800px"
      >
        <el-form ref="form" :model="form" :inline="true" :rules="rules" size="small" label-width="110px">
          <el-form-item label="订单编号" prop="orderNo">
            <el-input v-model.trim="form.orderNo" style="width: 240px;" disabled />
          </el-form-item>
          <!-- <el-form-item label="订单名称">
            <el-input v-model.trim="form.orderName" style="width: 240px;" disabled />
          </el-form-item> -->
          <!-- <el-form-item label="客户编号">
            <el-input v-model.trim="form.customerId" style="width: 240px;" disabled />
          </el-form-item> -->
          <el-form-item label="用户名">
            <el-input v-model.trim="form.customerName" style="width: 240px;" disabled />
          </el-form-item>
          <el-form-item label="客户电话" prop="customerPhone">
            <el-input v-model.trim="form.customerPhone" style="width: 240px;" disabled />
          </el-form-item>
          <el-form-item label="收件人">
            <el-input v-model.trim="form.receiveName" style="width: 240px;" disabled />
          </el-form-item>
          <el-form-item label="收件人电话" prop="receivePhone">
            <el-input v-model.trim="form.receivePhone" style="width: 240px;" disabled />
          </el-form-item>
          <el-form-item label="收件人地址">
            <el-input v-model.trim="form.receiveAddress" style="width: 240px;" disabled />
          </el-form-item>
          <el-form-item label="学习卡类型">
            <el-select v-model="form.cardType" filterable placeholder="请选择" style="width: 240px;" disabled>
              <el-option
                v-for="item in dict.card_type"
                :key="item.id"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="学习卡数量(张)">
            <el-input-number v-model="form.cardCount" style="width: 240px;" :controls="false" :min="1" :max="999999999" disabled />
          </el-form-item>
          <el-form-item label="面值(元)">
            <el-input v-model="form.cardAmount" type="number" style="width: 240px;" disabled />
          </el-form-item>
          <el-form-item label="总额(元)">
            <el-input v-model="form.totalAmount" type="number" style="width: 240px;" disabled />
          </el-form-item>
          <el-form-item label="下单时间">
            <el-date-picker v-model="form.createTime" type="datetime" style="width: 240px;" disabled />
          </el-form-item>
          <el-form-item label="支付方式">
            <!-- <el-input v-model.trim="form.payMethod" style="width: 240px;" disabled /> -->
            <el-select v-model="form.payMethod" filterable style="width: 240px;" disabled>
              <el-option
                v-for="item in dict.pay_method"
                :key="item.id"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="备注">
            <el-input v-model="form.remark" style="width: 240px;" />
          </el-form-item>
          <el-form-item label="发货状态">
            <el-select v-model="form.sendStatus" filterable placeholder="请选择" style="width: 240px;" disabled>
              <el-option
                v-for="item in dict.send_status"
                :key="item.id"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <!-- <el-form-item label="订单状态">
            <el-select v-model="form.orderStatus" filterable placeholder="请选择" style="width: 240px;" disabled>
              <el-option
                v-for="item in dict.order_status"
                :key="item.id"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item> -->
          <el-form-item label="签收状态">
            <el-select v-model="form.isSign" filterable placeholder="请选择" style="width: 240px;">
              <el-option
                v-for="item in dict.is_sign"
                :key="item.id"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="物流单号">
            <el-input v-model.trim="form.logisticsNum" style="width: 240px;" />
          </el-form-item>
          <el-form-item label="发货时间">
            <el-date-picker v-model="form.sendTime" type="datetime" style="width: 240px;" disabled />
          </el-form-item>
          <el-form-item label="签收时间">
            <el-date-picker v-model="form.signTime" type="datetime" style="width: 240px;" disabled />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="text" @click="crud.cancelCU">取消</el-button>
          <el-button :loading="crud.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
        </div>
      </el-dialog>
      <!--表格渲染-->
      <el-table
        ref="table"
        v-loading="crud.loading"
        :data="crud.data"
        size="small"
        style="width: 100%;"
        @selection-change="crud.selectionChangeHandler"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column prop="customerName" label="用户名" align="center" />
        <el-table-column prop="customerPhone" label="客户电话" width="95" align="center" />
        <el-table-column prop="receiveName" label="收货人姓名" align="center" />
        <el-table-column prop="receivePhone" label="收货人电话" width="95" align="center" />
        <el-table-column prop="orderNo" label="订单号" align="center" />
        <el-table-column prop="logisticsNum" label="物流单号" align="center" />
        <el-table-column prop="sendStatus" label="发货状态" align="center">
          <template slot-scope="scope">
            {{ dict.label.send_status[scope.row.sendStatus] }}
          </template>
        </el-table-column>
        <!-- <el-table-column prop="orderStatus" label="订单状态" align="center">
          <template slot-scope="scope">
            {{ dict.label.order_status[scope.row.orderStatus] }}
          </template>
        </el-table-column> -->
        <el-table-column prop="isSign" label="签收状态" align="center">
          <template slot-scope="scope">
            {{ dict.label.is_sign[scope.row.isSign] }}
          </template>
        </el-table-column>
        <el-table-column prop="cardType" label="学习卡类型" align="center">
          <template slot-scope="scope">
            {{ dict.label.card_type[scope.row.cardType] }}
          </template>
        </el-table-column>
        <el-table-column prop="cardCount" label="学习卡数量(张)" align="center" />
        <!-- <el-table-column prop="customerName" label="发货人" align="center" /> -->
        <el-table-column prop="sendTime" label=" 发货时间" align="center">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.sendTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="signTime" label="签收时间" align="center">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.signTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="150px" align="center">
          <template slot-scope="scope">
            <el-button
              :disabled="scope.row.orderStatus===1 && scope.row.sendStatus===0 && scope.row.isSign===0 ?false:true"
              type="warn"
              @click="detail(scope.row)"
            >发货</el-button>
            <el-button type="primary" @click="detail(scope.row)">详情</el-button>
          </template>

        </el-table-column>
      </el-table>
      <!--分页组件-->
      <pagination />
    </div>
  </div>
</template>

<script>
import crudOrder from '@/api/card/order'
import CRUD, { presenter, header, form, crud } from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import crudOperation from '@crud/CRUD.operation'
import udOperation from '@crud/UD.operation'
import pagination from '@crud/Pagination'
import { Notification } from 'element-ui'
import { isvalidPhone } from '@/utils/validate'

const defaultForm = {
  orderNo: null,
  orderName: null,
  orderType: null,
  customerId: null,
  customerName: null,
  customerPhone: null,
  receiveName: null,
  receivePhone: null,
  receiveAddress: null,
  orderStatus: null,
  cardType: null,
  cardCount: null,
  cardAmount: null,
  totalAmount: null,
  createTime: null,
  payMethod: null,
  remark: null,
  sendStatus: null,
  isSign: null,
  logisticsNum: null,
  sendTime: null,
  signTime: null,
  clickable: false,
  flag: 1
}
export default {
  name: 'Order',
  // eslint-disable-next-line vue/no-unused-components
  components: { pagination, crudOperation, rrOperation, udOperation },
  mixins: [presenter(), header(), form(defaultForm), crud()],
  dicts: ['order_type', 'order_status', 'card_type', 'send_status', 'is_sign', 'pay_method'],
  cruds() {
    return CRUD({
      title: '发卡',
      url: 'api/order',
      idField: 'orderNo',
      sort: 'orderNo,desc',
      crudMethod: { ...crudOrder },
      optShow: {
        add: false,
        del: false,
        reset: true,
        edit: true,
        download: true
      }
    })
  },
  data() {
    const validPhone = (rule, value, callback) => {
      if (!isvalidPhone(value)) {
        callback(new Error('请输入正确的11位手机号码'))
      } else {
        callback()
      }
    }
    return {
      permission: {
        add: ['admin', 'order:add'],
        edit: ['admin', 'order:edit'],
        del: ['admin', 'order:del'],
        shipments: ['admin', 'order:shipments'],
        cancel: ['admin', 'order:cancel']
      },
      orderNo: [
        { required: true, message: '订单编号不能为空', trigger: 'blur' }
      ],
      queryTypeOptions: [
        { key: 'orderNo', display_name: '订单号' },
        { key: 'receiveName', display_name: '收货人' }
      ],
      sendStatus: [
        { key: '0', display_name: '未发货' },
        { key: '1', display_name: '已发货' }
      ],
      isSign: [
        { key: '0', display_name: '未签收' },
        { key: '1', display_name: '已签收' }
      ],
      rules: {
        customerPhone: [
          { trigger: 'blur', validator: validPhone }
        ],
        receivePhone: [
          { trigger: 'blur', validator: validPhone }
        ]
      }
    }
  },
  created() {

  },
  methods: {
    // 钩子：在获取表格数据之前执行，false 则代表不获取数据
    [CRUD.HOOK.beforeRefresh]() {
      this.crud.params.orderStatus = '0,1,2,4'
      this.crud.params.flag = 1
      // this.crud.query.orderStatus = 2
      // console.log('++++2222222', this.crud)
      return true
    },
    // 新增与编辑前做的操作
    [CRUD.HOOK.afterToCU](crud, form) {
      form.sendStatus = form.sendStatus + ''
      form.isSign = form.isSign + ''
      form.orderStatus = form.orderStatus + ''
      form.payMethod = form.payMethod + ''
    },
    // 提交前
    [CRUD.HOOK.beforeSubmit](crud) {
      this.form.cardAmount = this.form.cardAmount * 100
      this.form.totalAmount = this.form.totalAmount * 100
      return true
    },
    [CRUD.HOOK.beforeToEdit](a, b) {
      if (b.isSign === 1) {
        this.$message.error('已签收的无法进行修改')
        return false
      }
      b.totalAmount = b.totalAmount / 100
      b.cardAmount = b.cardAmount / 100
      return true
    },
    shipments(b) {
      if (b.sendStatus === 1) {
        Notification.warning('已发货的无法再次发货')
        return
      }
      // if (b.logisticsNum === null) {
      //   Notification.warning('请填写物流单号')
      //   return
      // }
      // if (b.customerName === null) {
      //   Notification.warning('请填写请填写发货人')
      //   return
      // }
      const param = JSON.parse(JSON.stringify(b))
      param.sendStatus = 1
      param.orderStatus = 4
      // param.cardAmount = b.cardAmount / 100
      // param.totalAmount = b.totalAmount / 100
      const user = this.$store.getters.user
      param.buyId = user.id
      param.buyName = user.username
      param.page = 1
      param.size = b.cardCount
      // this.crud.page.size = 12
      console.log('++++', this.crud)
      crudOrder.shipments(param).then(res => {
        Notification.warning('发货成功')
        this.crud.refresh()
      })
    },
    detail(b) {
      this.$router.push({ path: '/card/cardReceive', query: { orderNo: b.orderNo, cardType: b.cardType, cardAmount: b.cardAmount,
        cardCount: b.cardCount, totalAmount: b.totalAmount, orderType: b.orderType, receiveName: b.receiveName, receivePhone: b.receivePhone,
        receiveAddress: b.receiveAddress, orderStatus: b.orderStatus, logisticsNum: b.logisticsNum, logisticsName: b.logisticsName }})
    }
  }
}
</script>

<style scoped lang="scss">
  .head-container {
    ::v-deep .el-input-number.is-without-controls .el-input__inner {
      text-align: left;
    }

    /** 去除input输入框样式 */
    ::v-deep  input[type=number]::-webkit-inner-spin-button {
      -webkit-appearance: none;
    }
    ::v-deep input[type="number"]{
        -moz-appearance:textfield;
    }
  }
</style>
